<template>
  <div style="border-bottom: 1px solid #dfdfdf;font-size: 14px;">
    <div style="display: flex;height: 40px;padding: 0 50px;background-color: #409EFF;">

      <el-button link @click="toHomePage" style="color: #FFFFFF;" class="top-title">欢迎来到美多商城</el-button>

      <div style="flex: 1;display: flex;">
        <div style="flex: 1;"></div>
        <div style="width: 260px;display: flex;">
          <div style="display: flex;width: 200px;padding: 0 10px;" class="top-title">

            <el-button link @click="toCart" style="color: #FFFFFF;" class="top-title">购物车</el-button>


            <el-button link @click="toOrderPage" style="color: #FFFFFF;" class="top-title">我的订单</el-button>
          </div>
          <el-dropdown placement="bottom-end" @command="handleCommand">
            <span class="el-dropdown__box">
              <div style="display: flex; align-items: center; max-width: 180px;">
                <el-avatar :src="avatar" />
                <span style="
                  color:white;
                  margin:0 8px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  max-width: 120px;
                ">{{ username }}</span>
                <el-icon>
                  <CaretBottom />
                </el-icon>
              </div>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import avatar from '@/assets/default.png'
import { useUserInfoStore } from '@/stores/userInfo.js'
import { useTokenStore } from '@/stores/token.js'
const tokenStore = useTokenStore();
const userInfoStore = useUserInfoStore()
import {
  User,
  Crop,
  EditPen,
  SwitchButton,
  CaretBottom
} from '@element-plus/icons-vue'
const input = ref('')
const username = ref(userInfoStore.info ? userInfoStore.info : '未登录') // 初始
// 保持原有导入和响应式数据
import { useRouter } from 'vue-router' // 新增路由导入
const router = useRouter() // 新增路由
const toCart = () => {
  router.push('/cart')
}
const toHomePage = () => {
  router.push('/')
}
const toOrderPage = () => {
  router.push('/order')
}

import { ElMessageBox, ElMessage } from 'element-plus'
import { userLogoutService } from '@/api/user.js'
const handleCommand = (command) => {
  //判断指令
  if (command === 'logout') {
    //退出登录
    ElMessageBox.confirm('确定退出登录？', '温馨提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(async () => {
      //用户点击了确认
      
      //1.调用后端接口清除token
      let result = await userLogoutService();
      //2.清空pinia中的token以及个人信息
      tokenStore.removeToken()
      userInfoStore.removeInfo()
      //3.跳转到登录界面
      router.push('/login')
    }).catch(() => {
      //用户点击了取消
      ElMessage({
        type: 'info',
        message: '取消退出登录',
      })
    })
  } else {
    //路由
    router.push('/user/' + command)
  }
}
</script>

<style>
.top-title:hover {
  cursor: pointer;
  color: #e5e5e5 !important;
}

.title {
  font-weight: bold;
  font-size: 18px;
}

.title:hover {
  color: #c250c6 !important;
}

.el-dropdown__box {
  display: flex;
  align-items: center;

  .el-icon {
    color: #999;
    margin-left: 10px;
  }

  &:active,
  &:focus {
    outline: none;
  }
}
</style>